<template>
  <div>
    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <compensatory-view-dialog
      :visible.sync="viewVisible"
      :comps-id="viewRow.id"
      :related-id="viewRow.customer_related_id"
    ></compensatory-view-dialog>
  </div>
</template>

<script>
import CompensatoryViewDialog from '@/credit/views/city/reportCity/ledger/component/CompensatoryViewDialog'
import { arrayFromString } from '@vimi/utils-tool'
import { deleteOss } from '@/common/api/oss'
export default {
  components: {
    CompensatoryViewDialog,
  },
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      order: {
        create_time: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'customer_related_id.eq': '',
      },
      loading: false,
      tableName: 'comps_view',
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '代偿时间', prop: 'reach_time', align: 'center', width: '120px' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '代偿本金（元）', prop: 'reach_principal', align: 'center' } },
        { attrs: { label: '代偿利息（元）', prop: 'reach_interest', align: 'center' } },
        { attrs: { label: '其他费用（元）', prop: 'other_fee', align: 'center' } },
        { attrs: { label: '代偿合计金额（元）', prop: 'reach_total_amount', align: 'center' } },
        { attrs: { label: '代偿说明', prop: 'reach_detail', minWidth: 120 } },
        {
          attrs: { label: '操作', align: 'center', width: 130 },
          operations: [
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
            {
              content: '删除',
              icon: 'fa fa-trash',
              attrs: { class: 'text-danger' },
              event: this.handleDelete,
            },
          ],
        },
      ],
      totalCount: 0,

      // 查看
      viewVisible: false,
      viewRow: {},
    }
  },
  computed: {},
  watch: {
    visible: {
      handler: function (val) {
        if (val) {
          this.getData()
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleDelete(row = {}) {
      this.$utils
        .msgbox({
          message: `确定删除${this.$utils.dateFormat(row.reach_time, 'yyyy-MM-dd')}代偿信息?`,
          beforeClose: () => this.$api.deleteData(this.$serviceName, 'comps', row.id),
        })
        .then(() => {
          if (row.attachment) {
            deleteOss(arrayFromString(row.attachment))
          }
          this.$emit('success')
          this.getData()
          this.$message.success('删除成功！')
        })
        .catch(() => this.$message.error('删除失败，请重试！'))
    },
    getData(index = 1) {
      const { queryId } = this
      if (!queryId) return

      this.params['customer_related_id.eq'] = queryId
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = data.data || []
          this.totalCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleView(row) {
      this.viewRow = row
      this.viewVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
